<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div v-if="distributorInfo">
          <span style="font-size: 16px; margin-right: 20px">配送商
            {{ distributorInfo.distributeName }}</span>
          <!--statusType-->
          <el-tag
            type="warning"
            size="small"
          >
            <div style="display:flex;align-items:center;">
              <div>{{ getLabel('distributor_status',distributorInfo.disStatus) }}</div>
              <div
                v-if="distributorInfo.disStatus==='2'"
                style="margin-left:5px;"
              >
                <span v-if="distributorInfo.isDistributeServer">[ 无配送服务 ]</span>
                <span v-if="distributorInfo.isDistributeTerminal">[ 无配送终端 ]</span>
                <span v-if="distributorInfo.isChange">[ 变更审核中 ]</span>
                <span v-if="distributorInfo.isQualification">[ 资质审核中 ]</span>
              </div>
            </div>
          </el-tag>
        </div>
      </template>
      <template
        v-if="distributorInfo"
        #btn
      >
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
        <el-button
          v-auth="{v: ['crm:distributor:contractedDistributor:completeFiles'], bool: distributorInfo.disStatus==='2'&&!distributorInfo.isQualification}"
          type="primary"
          size="small"
          @click="updateFiles"
        >完善资质</el-button>
        <!--
        <el-button
          v-if="distributorInfo.disStatus==='-1'"
          class="border-danger"
          size="small"
          @click="deleteOperation"
        >删除</el-button>
        <el-button
          v-if="distributorInfo.disStatus==='2'"
          class="border-danger"
          size="small"
          @click="cancelOperation"
        >注销企业</el-button>
        <el-button
          v-if="distributorInfo.disStatus==='2'"
          type="primary"
          size="small"
          @click="endOperation"
        >终止合作</el-button>
        <el-button
          v-if="distributorInfo.disStatus==='2'&&!distributorInfo.isChange"
          type="primary"
          size="small"
          @click="changeOperation"
        >变更信息</el-button>
        <el-button
          v-if="distributorInfo.disStatus==='-1'"
          type="primary"
          size="small"
          @click="editOperation"
        >编辑</el-button>
         -->
      </template>
    </header-module>
    <div
      v-if="distributorInfo"
      class="info-container"
      style="margin-bottom: 20px;"
    >
      <el-form
        class="form-detail"
        label-position="right"
        label-width="100px"
        inline
        :model="distributorInfo"
      >
        <el-form-item
          label="配送商编号："
          style="width: 25%"
        >
          <div>{{ distributorInfo.distributeNo || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="所在地区："
          style="width: 25%"
        >
          <div>
            <span v-if="distributorInfo.provinceName">{{ distributorInfo.provinceName }}</span>
            <span v-if="distributorInfo.cityName"> / {{ distributorInfo.cityName }}</span>
            <span v-if="distributorInfo.areaName"> / {{ distributorInfo.areaName }}</span>
          </div>
        </el-form-item>
        <el-form-item
          label="详细地址："
          style="width: 25%"
        >
          <div>{{ distributorInfo.address || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="负责职员："
          style="width: 25%"
        >
          <div>{{ distributorInfo.userName || '无' }}</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">
      <el-tabs
        v-model="activeName"
        class="elTabs"
        @tab-click="tabClick"
      >
        <el-tab-pane
          label="详细信息"
          name="1"
        >
          <base-info
            v-if="activeName==='1'&&distributorInfo"
            :detail="distributorInfo"
          />
        </el-tab-pane>
        <!-- <el-tab-pane
          label="进销存[待定]"
          name="2"
        >
          <store v-if="activeName==='2'" />
        </el-tab-pane>
        <el-tab-pane
          label="回款记录[待定]"
          name="3"
        >
          <returned-money v-if="activeName==='3'" />
        </el-tab-pane>
        <el-tab-pane
          label="流向记录[待定]"
          name="4"
        >
          <flow-direction v-if="activeName==='4'" />
        </el-tab-pane> -->
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="信用管理"
          name="5"
        >
          <credit-management
            v-if="activeName==='5'"
            ref="creditRef"
            :mode-id="distributorId"
            :is-operation="false"
            @onSuccess="refreshDetail"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="配送服务"
          name="6"
        >
          <delivery-service
            v-if="activeName==='6'"
            :detail="distributorInfo"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="配送终端关系"
          name="7"
        >
          <distribute-relation
            v-if="activeName==='7'"
            :detail="distributorInfo"
            @onSuccess="refreshDetail"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="配送合同"
          name="8"
        >
          <contract
            v-if="activeName==='8'"
            :contract-data="contractData"
            :is-operation="false"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="客户地址"
          name="9"
        >
          <address-list
            v-if="activeName==='9'"
            type-data="distribute"
            :is-operation="false"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="联系人"
          name="10"
        >
          <contact
            v-if="activeName==='10'"
            type-data="distribute"
            :is-operation="false"
          />
        </el-tab-pane>
        <!-- <el-tab-pane
          label="审批流程"
          name="11"
        >
          审批流程
        </el-tab-pane> -->
        <el-tab-pane
          v-if="distributorInfo?.disStatus!=='1'&&distributorInfo?.disStatus!=='-1'&&distributorInfo?.disStatus!=='5'"
          label="操作记录"
          name="12"
        >
          <operation-view
            v-if="activeName==='12'"
            :id="distributorId"
            mode="distribute"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  components: {
    baseInfo: defineAsyncComponent(() => import('./baseInfo/index.vue')),
    // store: defineAsyncComponent(() => import('./store/index.vue')),
    // returnedMoney: defineAsyncComponent(() =>
    //   import('./returnedMoney/index.vue')
    // ),
    // flowDirection: defineAsyncComponent(() =>
    //   import('./flowDirection/index.vue')
    // ),
    deliveryService: defineAsyncComponent(() =>
      import('./deliveryService/index.vue')
    ),
    distributeRelation: defineAsyncComponent(() =>
      import('./distributeRelation/index.vue')
    ),
    creditManagement: defineAsyncComponent(() =>
      import('@CRM/views/commonView/creditManagement/index.vue')
    ),
    addressList: defineAsyncComponent(() =>
      import('@CRM/views/commonView/address/addressList.vue')
    ),
    contract: defineAsyncComponent(() =>
      import('@CRM/views/commonView/contract/contract.vue')
    ),
    contact: defineAsyncComponent(() =>
      import('@CRM/views/commonView/contact/contact.vue')
    ),
  },
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var activeName = ref('1')
    var reactiveData = reactive({
      distributorId: Number(route.query.id),
      statusType: 'success',
      distributorInfo: null,
      contractData: {
        id: Number(route.query.id),
        name: '',
        contractType: 'distribute_contrart',
        contractObjectType: 'distribute',
        title: '配送合同详情',
        disabled: true,
      },
    })

    const back = () => {
      router.back()
    }
    const tabClick = (val) => {
      console.log(val)
    }
    // 变更信息
    const changeOperation = () => {
      router.push({
        name: 'distributorsCreate',
        query: {
          types: 'update',
          distributorId: reactiveData.distributorId,
        },
      })
    }
    const getDetail = () => {
      api.distributors
        .DISTRIBUTORS_DETAIL({ id: reactiveData.distributorId })
        .then((res) => {
          if (res.code === 0) {
            reactiveData.distributorInfo = res.data.DistributeInfo || null
            reactiveData.contractData.name =
              res.data.DistributeInfo.distributeName
            if (reactiveData.distributorInfo.disStatus === '-1') {
              reactiveData.statusType = 'danger'
            } else if (reactiveData.distributorInfo.disStatus === '1') {
              reactiveData.statusType = 'warning'
            }
          }
        })
    }
    // 编辑
    const editOperation = () => {
      router.push({
        name: 'distributorsCreate',
        query: {
          types: 'edit',
          distributorId: reactiveData.distributorId,
        },
      })
    }
    // 完善资质
    const updateFiles = () => {
      router.push({
        name: 'distributorsFileUpdate',
        query: {
          distributorId: reactiveData.distributorId,
        },
      })
    }
    // 删除
    const deleteOperation = () => {
      currentInstance.proxy
        .alertBox({
          message: '删除配送商后，数据不可恢复，确认删除？',
          title: '删除',
        })
        .then(() => {
          api.distributors
            .DISTRIBUTORS_DELETE({
              id: reactiveData.distributorId,
            })
            .then((res) => {
              if (res.code !== 0) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: '删除成功',
                })
                router.replace({
                  name: 'distributors',
                })
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 终止合作
    const endOperation = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认终止合作？',
          title: '终止合作',
        })
        .then(() => {
          api.distributors
            .DISTRIBUTORS_END({
              id: reactiveData.distributorId,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                getDetail()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 注销
    const cancelOperation = () => {
      currentInstance.proxy
        .alertBox({
          message: '注销配送后，该配送商将不可用且状态不可恢复，确认注销？',
          title: '注销企业',
        })
        .then(() => {
          api.distributors
            .DISTRIBUTORS_CANCEL({
              id: reactiveData.distributorId,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                getDetail()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    const refreshDetail = () => {
      getDetail()
    }

    onMounted(() => {
      getDetail()
    })

    return {
      activeName,
      ...toRefs(reactiveData),
      back,
      tabClick,
      editOperation,
      deleteOperation,
      endOperation,
      cancelOperation,
      refreshDetail,
      changeOperation,
      updateFiles,
    }
  },
}
</script>

<style lang="scss" scoped>
.info-container {
  background: #fff;
  padding: 10px 20px;
}
</style>
